<template>
  <div class="">
    <van-nav-bar title="确认订单" left-arrow @click-left="$router.go(-1)" />
    <van-contact-card
      type="edit"
      :tel="list.mobile"
      :name="list.linkMan"
      @click="$router.push('/site')"
    />
    <div class="column">
      <p>商场列表</p>
    </div>
    <div :key="i" v-for="(v, i) in obj">
      <van-card
        :num="v.num"
        :price="v.upobj == '' ? '暂无' : v.upobj"
        :desc="`￥${v.minPrice}`"
        :title="v.name"
        :thumb="v.pic"
      />
    </div>

    <div class="column">
      <p>商场列表</p>
    </div>
    <inputCity bag="blue" leftText="备注" class="remark"></inputCity>
    <div class="column">
      <p>商品金额</p>
    </div>
    <van-submit-bar
      :price="$store.getters.total * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import inputCity from "../inputCity/inputCity.vue";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { city } from "@/api";
import { useRouter } from "vue-router";
export default {
  setup() {
    let store = useStore();
    let token = localStorage.getItem("token");
    let list = ref([]);
    let route = useRoute();
    let router = useRouter();
    let obj = store.state.shoppingList.filter((item) => item.checked == true);
    // 立即支付
    function onSubmit() {
      router.push({ path: "/payment" });
    }
    city(token).then((res) => {
      list.value = res[0];
      console.log(list.value);
    });

    return {
      obj,
      list,
      onSubmit,
    };
  },
  components: { inputCity },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar .van-icon {
  color: black;
}
.remark {
  background-color: #fff;
  padding-left: 20px;
}
::v-deep .van-card:not(:first-child) {
  margin: 0;
  height: 220px;
}
::v-deep .van-card__price-currency {
  display: none;
}

::v-deep .van-card__price-integer {
  font-size: 26px;
  color: rgb(134, 131, 131);
}
::v-deep .van-card__content {
  div {
    &:nth-child(1) {
      display: flex;
      justify-content: space-between;
    }
  }
}
::v-deep .van-card {
  background-color: #fff;
  border-bottom: 2px solid rgb(218, 210, 210);
}
.column {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding-left: 20px;
  background-color: #fff;
  border-bottom: 2px solid rgb(214, 209, 209);
  p {
    font-size: 28px;
  }
}
</style>
